import React from 'react'
import {Modal,Image,Tag,Checkbox, message} from 'antd'

function RelacePhoto(props) {

  const {isModalVisible,setIsModalVisible,data,getSelectPhoto} = props

  const handleCancel= () => {
    setIsModalVisible(false)
  }

  const handleOk= () => {
    if(!data.some(i=>i.checked)){
      message.error('请至少选择一张图片')
      return
    } else {
      getSelectPhoto(data.filter(i=>i.checked).map(I=>I.pictureUrl))
      setIsModalVisible(false)
    }
  }

  return  <Modal destroyOnClose width={950} title="更换图片" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
    <div className="repace-photo">
      {
        data?data.map(i=>{
          return <div key={i.id} className='repace-photo-item'>
            <Image
            width={200}
            src={i.pictureUrl}
         />
          <Checkbox defaultChecked={i.checked} className='checkbox-photo' onChange={e=>i.checked=e.target.checked}></Checkbox>
          {
            i.pictureType?<Tag className='photo-tag' color="green">卡通</Tag>:<Tag  className='photo-tag'  color="green">实物</Tag>
          }
          </div>
        }):''
      }
      
    </div>
</Modal>
}

export default  RelacePhoto